
<template>
  <div v-if="checkPermission(['admin'])" class="app-container">
    <el-row>
      <el-row :gutter="20">
        <el-col :span="24" :xs="24">
          <el-row style="padding-top: 20px">
            <div>
              <el-col :span="18">
                <Form ref="topSearchForm" :model="searchParams" inline>
                  <FormItem label="">
                    <span class="form-font">搜索:</span>
                    <Input v-model="searchParams.search" clearable placeholder="请输入集群名称" style="width: 200px" suffix-icon="el-icon-search" type="text" />
                  </FormItem>
                  <FormItem label="">
                    <span class="form-font">类型:</span>
                    <el-select v-model="searchParams.type" filterable clearable size="small" style="width: 120px">
                      <el-option v-for="item in jobTypeChoice" :key="item.value" :label="item.label" :value="item.value">{{ item.label }} </el-option>
                    </el-select>
                  </FormItem>
                </Form>
              </el-col>
              <el-col align="right" :span="6">
                <a @click="addJob"> <i class="el-icon-circle-plus"></i>&nbsp;&nbsp;添加传输 </a>
              </el-col>
            </div>
          </el-row>
          <page-table
            height="200"
            :columns="jobColumns"
            :data="jobDatas.data"
            :loading="jobLoading"
            :max-height="jobMaxHeight"
            :pagination="jobPagination"
            border
            size="small"
            stripe
            @on-change="onTableChange"
          ></page-table>
        </el-col>
      </el-row>
    </el-row>
    <job-action v-if="showJobActionModal" :action="action" :job-action-modal="showJobActionModal" :job-info="jobInfo" @on-job-change="setJobActionModal"></job-action>
  </div>
</template>

<script>
import PageTable from '@/components/PageTable/PageTable'
import { getTransferJobListByPage } from '@/api/transfer/job'
import { jobColumns, jobTypeChoice } from '@/views/transfer/job/config'
import { getParams } from '@/libs/table'
import { snakeCaseObject } from '@/libs/object'
import checkPermission from '@/utils/permission'
import JobAction from '@/views/transfer/job/components/JobAction'
export default {
  name: 'Job',
  components: { PageTable, JobAction },
  data() {
    return {
      jobsList: [],
      sorter: {},
      pageSize: 15,
      pageNum: 1,
      jobLoading: false,
      jobMaxHeight: 700,
      jobTypeChoice: [],
      jobInfo: {},
      jobColumns: [],
      jobDatas: [],
      searchParams: {
        name: '',
        type: '',
        vip: ''
      },
      action: {
        title: '创建',
        type: 'create'
      },
      showJobDeleteModal: false,
      showJobLogDrawer: false,
      showJobActionModal: false
    }
  },
  computed: {
    jobPagination() {
      const { total, pageNum: current, pageSize } = this.jobDatas
      return {
        total,
        current,
        pageSize
      }
    },
    requestParams() {
      const params = getParams(this)
      if (this.searchParams.search) {
        params['search'] = this.searchParams.search
      }
      if (this.searchParams.type) {
        params['type'] = this.searchParams.type
      }
      return params
    }
  },
  watch: {
    requestParams() {
      this.debouncedGetJobData()
    },
    searchParams: {
      handler(newName, oldName) {
        this.pageNum = 1
      },
      deep: true
    }
  },
  created() {
    this.debouncedGetJobData = this.$lodash.debounce(this.getTransferJobListByPage, 500)
  },
  mounted() {
    this.jobColumns = jobColumns(this)
    this.jobTypeChoice = jobTypeChoice
    this.debouncedGetJobData()
  },
  methods: {
    checkPermission,
    setInitModelInfo() {
      this.searchParams = {
        name: '',
        search: '',
        type: ''
      }
    },
    onTableChange(pagination, filters, sorter) {
      const { current: pageNum, pageSize } = pagination
      this.pageNum = pageNum
      this.pageSize = pageSize
      this.sorter = sorter
    },
    addJob() {
      this.action = {
        title: '创建',
        type: 'create'
      }
      this.setInitModelInfo()
      this.showJobActionModal = true
    },
    setConfirmJobModal(val) {
      this.showConfirmJobModal = val['status']
      if (!val['status'] && (val['type'] === 'update' || val['type'] === 'delete')) {
        this.getJobPageList()
      }
    },
    setDeleteModal(val) {
      console.log(val)
      this.showJobDeleteModal = val['status']
      if (!val['status'] && val['type'] === 'delete') {
        this.debouncedGetJobData()
      }
    },
    setJobActionModal(val) {
      this.showJobActionModal = val['status']
      if (val['status']) {
        this.jobInfo = {}
        this.action = {
          title: '创建',
          type: 'create'
        }
      }
      if (!val['status'] && (val['type'] === 'update' || val['type'] === 'create')) {
        this.getTransferJobListByPage()
      }
    },
    async getTransferJobListByPage() {
      this.jobLoading = true
      const { data } = await getTransferJobListByPage(snakeCaseObject(this.requestParams))
      this.jobDatas = data
      this.jobLoading = false
    }
  }
}
</script>

<style>
.tree {
  overflow: auto;
  max-height: 1000px;
  margin-top: 20px;
}
.el-tree {
  min-width: 100%;
  display: inline-block;
}
.form-font {
  color: #515a6e;
  line-height: 32px;
  font-size: 13px;
  padding-right: 10px;
}
</style>
